<template>
    <div id="page-order">
        <div class="page-title">
            位置：我的订单 / 订单详情
        </div>
        <div class="pay-sign">
            为了您的财产安全，不要点击陌生链接、不要向任何人透露银行卡或验证码信息，谨防诈骗！
        </div>
        <ul class="step-bar">
            <li class="active"><i class="icon icon-confirm-order"></i><span>确认订单</span></li>
            <li><i class="icon icon-pay"></i><span>付款</span></li>
            <li><i class="icon icon-success"></i><span>支付成功</span></li>
        </ul>
        <div class="order-number">
            订单号：{{orderId}}
            <span class="date">{{orderCreatedDate}}</span>
        </div>
        <div class="subscribe-wrap">
            <div class="subscribe-name-wrap">
                <span class="subscribe-name">订单说明：{{orderDescribe}}</span>
<!--                <span class="btn btn-modify-subscribe">修改</span>-->
            </div>
            <div class="fee">
                <div class="origin-fee">
                    应付：￥{{(originalMoney/100).toFixed(2)}}
                </div>
                <div class="discount-fee">
                    折扣：￥{{-((originalMoney-realMoney)/100).toFixed(2)}}
                </div>
            </div>
        </div>
        <div class="invoice-info">
            <div class="invoice-title">
                <div class="title">发票信息</div>
                <div class="explain">
                    由于税务开票数量限制，<span class="text-sign">需满 200元可开具发票</span>，金额不足时，需到付邮费。<br>
                    建议：可选择多个订单合并开具发票。<span class="text-sign">支付成功后7个工作日内</span>，发票即可寄出，请注意查收。
                </div>
                <el-switch
                        v-model="needInvoice"
                        active-color="#81C846"
                        inactive-color="#ff4949">
                </el-switch>
            </div>
            <form class="invoice-detail" id="invoice-detail-form" name="invoice-detail" v-if="needInvoice">
                <div class="radio invoice-type-radio">
                    <input id="invoice-type-public" type="radio" name="invoice-type" checked value="1" v-model="invoiceType">
                    <label for="invoice-type-public" class="radio-label">
                        <span>单位</span>
                    </label>
                    <input id="invoice-type-private" type="radio" name="invoice-type" value="2" v-model="invoiceType">
                    <label for="invoice-type-private" class="radio-label">
                        <span>个人</span>
                    </label>
                </div>
                <div class="form-item input-invoice-title">
                    <span class="title"><span class="must-fill">*</span>发票抬头：</span>
                    <input type="text"
                           placeholder="请输入发票抬头"
                           id="input-invoice-title"
                           :class="{'format-error':invoiceTitleError}"
                           v-model="invoiceTitle">
                    <span class="format-error-sign">发票抬头不能为空</span>
                </div>
                <div class="form-item invoice-number">
                    <span class="title"><span class="must-fill" v-if="invoiceType==1">*</span>税号：</span>
                    <input type="text"
                           placeholder="请输入税号"
                           id="input-invoice-number"
                           :class="{'format-error':invoiceDutyParagraphError}"
                           v-model="invoiceDutyParagraph">
                    <span class="format-error-sign">税号不能为空</span>
                </div>
                <span class="format-error-sign">税号不能为空</span>
                <div class="form-item invoice-content">
                    <span class="title">发票内容：</span>
                    <span>{{invoiceContent}}</span>
                </div>
                <hr>
                <div class="form-item name-phone two-item">
                    <span class="title"><span class="must-fill">*</span>联系人姓名：</span>
                    <input type="text"
                           placeholder="请输入联系人姓名"
                           id="input-name"
                           :class="{'format-error':invoiceRecipientsError}"
                           v-model="invoiceRecipients">
                    <span class="format-error-sign">姓名不能为空</span>
                    <span class="title"><span class="must-fill">*</span>手机号码：</span>
                    <input type="text"
                           placeholder="请输入手机号码"
                           id="input-contacts-phoneNumber"
                           :class="{'format-error':invoicePhoneError}"
                           v-model="invoicePhone">
                    <span class="format-error-sign">手机号码格式不正确</span>
                </div>
                <div class="form-item address">
                    <span class="title"><span class="must-fill">*</span>所在地区：</span>
                    <input type="text"
                           placeholder="请输入所在地区"
                           id="input-address"
                           :class="{'format-error':addressError}"
                           v-model="address">
                    <span class="format-error-sign">所在地区不能为空</span>
                </div>
                <div class="form-item detail-address">
                    <span class="title"><span class="must-fill">*</span>详细地址：</span>
                    <input type="text"
                           placeholder="请输入详细地址"
                           id="input-detail-address"
                           :class="{'format-error':detailAddressError}"
                           v-model="detailAddress">
                    <span class="format-error-sign">所在地区不能为空</span>
                </div>
                <div class="form-item dangers-sign">
                    <i class="icon"></i>
                    <span>请仔细核对信息，因信息错误产生的费用平台不予承担</span>
                </div>
            </form>
        </div>
        <div class="pay-type">
            <div class="pay-type-title">
                <span class="title">支付方式</span>
                <span class="sign-expiration-date">
                    (请于{{utils.formatSecond(orderPayCountdown)}}前完成支付，过期后系统将自动取消订单。)
                </span>
            </div>
            <div class="radio pay-type-radio">
                <input id="pay-type-1" type="radio" name="invoice-type" checked value="1" v-model="payType">
                <label for="pay-type-1" class="radio-label">
                    <img src="@/assets/img/order_pay-weixin.png" alt="微信支付">
                </label>
                <input id="pay-type-2" type="radio" name="invoice-type" value="2" v-model="payType">
                <label for="pay-type-2" class="radio-label">
                    <img src="@/assets/img/order_pay-alipay.png" alt="支付宝支付">
                </label>
                <input id="pay-type-3" type="radio" name="invoice-type" value="3" v-model="payType">
                <label for="pay-type-3" class="radio-label">
                    <img src="@/assets/img/order_pay-public.png" alt="对公转账">
                </label>
                <!--<input id="pay-type-3" type="radio" name="invoice-type" value="3" v-model="payType">
                <label for="pay-type-3" class="radio-label">
                    <img src="../assets/img/order_pay-public.png" alt="对公转账">
                </label>-->
            </div>
            <div class="public-explain" v-if="payType==3">
                <div class="sign">
                    <span class="title">温馨提示：</span>
                    <span class="sign-text">本订单自下单起保留10天，过期需重新购买。</span>
                </div>
                <ul class="explain-list">
                    <li>
                        <div class="item-title">1、受银行处理事件影响，采用线下汇款方式到账会有延误，强烈建议采用微信支付、支付宝实时到账。</div>
                    </li>
                    <li>
                        <div class="item-title">
                            2、汇付识别码 <span class="identification-code">{{identificationCode}}</span>
                        </div>
                        <div class="explain">
                            汇付识别码，需填写电汇凭证至【汇款用途】、【附言】、【摘要】等栏目内，<br>
                            因银行备注不同，最好在所有可填备注的地方填写。
                        </div>
                    </li>
                    <li>
                        <div class="item-title">
                            3、请您通过网银转账，或者自行到银行进行汇款，汇款账号如下：
                        </div>
                        <ul class="bank-account-info">
                            <li>
                                <span class="title">户名</span>
                                <span class="value">
                                    {{accountInfo.accountName}}
                                </span>
                            </li>
                            <li>
                                <span class="title">账号</span>
                                <span class="value">
                                    {{accountInfo.accountNumber}}
                                </span>
                            </li>
                            <li>
                                <span class="title">开户行</span>
                                <span class="value">
                                    {{accountInfo.openingBank}}
                                </span>
                            </li>
                            <li>
                                <span class="title">联行号</span>
                                <span class="value">
                                    {{accountInfo.sisterBankNumber}}
                                </span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="confirm-order">
            <div class="origin-fee">应付：￥{{(originalMoney/100).toFixed(2)}}</div>
            <div class="discount-fee">折扣：￥{{-((originalMoney-realMoney)/100).toFixed(2)}}</div>
<!--            <div class="express-fee">快递：￥9.00</div>-->
            <div class="btn btn-pay" @click="pay" data-content="结算"></div>
            <div class="real-fee-wrap">
                <div class="real-fee">
                    实付金额：<span class="num-fee">{{(realMoney/100).toFixed(2)}}</span>
                </div>
                <div class="pay-agreement">
                    <i class="icon" :class="{active:agreePayProtocol}" @click="payProtocol"></i><span>我已阅读并同意</span><a href="https://yzb.caigou2003.com/protocol/vip_protocol.html" target="_blank">《客户端服务使用协议及用户隐私权政策》</a>
                </div>
            </div>
        </div>
        <dialog-box v-if="showMask"
                    sign-text="请先阅读并同意<br>《客户端服务使用协议及用户隐私权政策》"
                    :show-cancel="false"
                    confirm-text-color="#F67B14"
                    confirm-text="我知道了"
                    @closeDialogBox="closeDialogBox"
        ></dialog-box>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                needInvoice:true,
                orderId:'获取中...',
                subscribeId:0,
                orderCreatedDate:'',
                orderPayCountdown:0,
                orderDescribe:'',
                originalMoney: '',
                realMoney: '',
                accountInfo:{},
                identificationCode:'',
                invoiceType:1,//发票类型 1单位、2个人
                invoiceExclusiveType:0,//0普通发票、1专用发票,
                invoiceTitle:'',
                invoiceDutyParagraph:'',//税号
                invoiceContent: "咨询服务费",
                invoiceRecipients:'',//联系人姓名
                invoicePhone:'',
                address:'',//所在地区
                detailAddress:'',
                payType:1,
                invoiceTitleError:false,
                invoiceDutyParagraphError:false,
                invoiceRecipientsError:false,
                invoicePhoneError:false,
                addressError:false,
                detailAddressError:false,
                countDownTimer:null,
                agreePayProtocol:true,
                showMask:false
            }
        },
        mounted() {
            // console.log(this.$route.query);
            this.orderId = this.$route.query.orderId;

            this.$request.orderDetail({
                orderId:this.orderId
            }).then(res=>{
                console.log(res);
                if(res.status==200){
                    let resData = res.data;
                    this.subscribeId = resData.appOrder.subscribeId;
                    this.orderDescribe = resData.appOrder.orderDescribe;
                    this.orderCreatedDate = resData.appOrder.orderCreateTime;
                    this.orderPayCountdown = resData.appOrder.orderPayCountdown>0?resData.appOrder.orderPayCountdown:0;
                    this.originalMoney = resData.appOrder.costPrice;
                    this.realMoney = resData.appOrder.cashFee;
                    this.identificationCode = resData.appOrder.code;
                    this.accountInfo = resData.accountVO;

                    this.countDownTimer = setInterval(()=>{
                        if(this.orderPayCountdown>0){
                            this.orderPayCountdown-=1;
                        }else {
                            clearInterval(this.countDownTimer);
                        }
                    },1000)
                }else {
                    this.requestError(res.status,res.message);
                }

            },err=>{
                console.log(err);
                this.requestFail(err);
            })
        },
        destroyed() {
            // this.$store.state.sideBarShow = false;
            clearInterval(this.countDownTimer);
        },
        watch:{
            invoiceType(val){
                this.invoiceDutyParagraphError = val==1&&this.invoiceDutyParagraph.trim() === '';
            },
            invoiceTitle(val){
                this.invoiceTitleError = val.trim() === '';
            },
            invoiceDutyParagraph(val){
                this.invoiceDutyParagraphError = this.invoiceType==1&&val.trim() === '';
            },
            invoiceRecipients(val){
                this.invoiceRecipientsError = val.trim() === '';
            },
            invoicePhone(val){
                this.invoicePhoneError = !this.utils.testPhoneNumber(val);
            },
            address(val){
                this.addressError =  val.trim() === '';
            },
            detailAddress(val){
                this.detailAddressError =  val.trim() === '';
            }
        },
        methods:{
            closeDialogBox(){
                this.showMask = false;
            },
            payProtocol(){
                this.agreePayProtocol = !this.agreePayProtocol;
            },
            saveInvoice(){
                return new Promise((resolve,reject)=>{
                    if(this.needInvoice){
                        let pass = true;
                        if(this.invoiceTitle.trim()===''){
                            pass = false;
                            this.invoiceTitleError = true;
                        }
                        if(this.invoiceType==1&&this.invoiceDutyParagraph.trim()===''){
                            pass = false;
                            this.invoiceDutyParagraphError = true;
                        }
                        if(this.invoiceRecipients.trim()===''){
                            pass = false;
                            this.invoiceRecipientsError = true;
                        }
                        if(!this.utils.testPhoneNumber(this.invoicePhone)){
                            pass = false;
                            this.invoicePhoneError = true;
                        }
                        if(this.address.trim()===''){
                            pass = false;
                            this.addressError = true;
                        }
                        if(this.detailAddress.trim()===''){
                            pass = false;
                            this.detailAddressError = true;
                        }

                        if(pass){
                            this.$request.addInvoice({
                                orderIds:[this.orderId],
                                invoiceType:this.invoiceType,//发票类型 1单位、2个人
                                invoiceExclusiveType:0,//0普通发票、1专用发票,
                                invoiceTitle:this.invoiceTitle,
                                invoiceDutyParagraph:this.invoiceDutyParagraph,//税号
                                invoiceContent: this.invoiceContent,
                                invoiceRecipients:this.invoiceRecipients,//联系人姓名
                                invoicePhone:this.invoicePhone,
                                invoiceDetailedAddress:this.address+this.detailAddress
                            }).then(res=>{
                                if(res.status==200){
                                    resolve(res);
                                }else {
                                    this.requestError(res.status,res.message);
                                    reject();
                                }
                            },err=>{
                                console.log(err);
                                reject(err);
                                this.requestFail(err);
                            })
                        }else {
                            reject('请将必填信息填写完整！');
                        }
                    }else {
                        resolve('不需要发票，继续执行');
                    }
                })
            },
            pay(){
                if(this.agreePayProtocol){
                    this.saveInvoice().then(()=>{
                        console.log('保存发票成功,调用支付');

                        this.$router.push({
                            name:'personal-pay',
                            query:{
                                orderId:this.orderId,
                                subscribeId:this.subscribeId,
                                payType:this.payType
                            }
                        });

                    },err=>{
                        console.log(err);
                        this.requestFail(err);
                    })
                }else {
                    this.showMask = true;
                }
            }
        }
    }
</script>

<style scoped lang="less">
    #page-order{
        @moudle-bg-color:#ffffff;
        @under-line:1px solid #F5F5FB;
        font-family:'Microsoft YaHei','微软雅黑';
        .color(#090909);
        .pay-sign{
            background-color: #f9e2cb;
            .lh(39px);
            .color(#cc0606);
            padding-left: 14px;
        }
        .order-number{
            .lh(70px);
            background-color: @moudle-bg-color;
            padding-left: 24px;
            .fz(16px);
            border-bottom: @under-line;
            margin-top: 11px;

            .date{
                .fz(14px);
                .color(#c2c2c2);
                margin-left: 16px;
            }
        }
        .subscribe-wrap{
            background-color: @moudle-bg-color;
            padding-bottom: 45px;
            .subscribe-name-wrap{
                padding-left: 29px;
                .lh(48px);
                .subscribe-name{
                    .fz(16px);
                    vertical-align: middle;
                }
                .btn-modify-subscribe{
                    display: inline-block;
                    .width(59px);
                   .lh(27px,25px);
                    border:1px solid rgba(247,136,30,1);
                    .border-radius(6px);
                    vertical-align: middle;
                    .center(text-x);
                    .color(@main-color);
                    .fz(14px);
                    margin-left: 8px;
                    cursor: pointer;
                }
            }
            .fee{
                text-align: right;
                padding-right: 18px;
                .origin-fee{
                    .fz(18px);
                }
                .discount-fee{
                    .fz(16px);
                    .color(#8F8F8F);
                    margin-top: 16px;
                }
            }
        }
        .invoice-info{
            margin-top: 20px;
            padding-bottom: 33px;
            background-color: @moudle-bg-color;
            .invoice-title{
                .clearfix;
                padding: 4px 23px;
                border-bottom: @under-line;

                .title{
                    .fz(18px);
                    font-weight:bold;
                    line-height: 48px;
                    .fl;
                }
                .explain{
                    .color(#9F9F9F);
                    .fl;
                    .fz(12px);
                    line-height: 24px;
                    margin-left: 39px;

                    .text-sign{
                        .color(#f29c38  );
                    }
                }
                .el-switch{
                    .size(33px,18px);
                    .fr;
                    margin-top: 6px;

                    .el-switch__core{
                        border-color: #81C846;
                        background-color: #81C846;
                    }
                }
            }
            .invoice-detail{
                padding-top: 33px;
                .invoice-type-radio{
                    input[type="radio"] {
                        position: absolute;
                        opacity: 0;
                    }
                    label{
                        .color(#A9A9A9);
                        cursor: pointer;
                        margin-left: 43px;
                        &:nth-of-type(1){
                            margin-left: 176px;
                        }
                    }
                    input[type="radio"] + .radio-label:before {
                        .size(16px,16px);
                        content: '';
                        background: #f4f4f4;
                        border-radius: 100%;
                        border: 1px solid #b4b4b4;
                        display: inline-block;
                        position: relative;
                        margin-right: 10px;
                        vertical-align: top;
                        text-align: center;
                        -webkit-transition: all 250ms ease;
                        transition: all 250ms ease;
                    }
                    input[type="radio"]:checked + .radio-label:before {
                        background-color: #F29C38   ;
                        box-shadow: inset 0 0 0 3px #f4f4f4;
                        border-color: #F29C38;
                    }
                    input[type="radio"]:focus + .radio-label:before {
                        outline: none;
                    }
                    input[type="radio"]:disabled + .radio-label:before {
                        box-shadow: inset 0 0 0 4px #f4f4f4;
                        border-color: #b4b4b4;
                        background: #b4b4b4;
                    }
                    .radio input[type="radio"] + .radio-label:empty:before {
                        margin-right: 0;
                    }
                }
                .form-item{
                    margin-top: 20px;
                    border: none;
                    .title{
                        display: inline-block;
                        .width(130px);
                        text-align: right;
                        font-weight: normal;
                        line-height: 35px;
                        .fz(16px);

                        .must-fill{
                            .color(#D60C00);
                            margin-right: 10px;
                        }

                        &+span{
                            line-height: 35px;
                        }
                    }

                    input{
                        .width(463px);
                        .height(35px);
                        border:1px solid rgba(207,207,207,1);
                        .border-radius(8px);
                        .fz(16px);
                        padding-left: 10px;
                        vertical-align: middle;

                        &#input-address,&#input-detail-address{
                            .width(527px);
                        }
                    }

                    &.two-item{
                        input{
                            .width(194px);
                        }
                    }

                    &.dangers-sign{
                        padding-left: 33px;
                        .color(#D60C00);
                        .fz(16px);
                        i{
                            .size(21px,21px);
                            .bg('@{img-base-url}order_icon-dangers-sign.png');
                            margin-right: 10px;
                        }
                    }
                }
                hr{
                    border-color: #E9E9E9;
                }

            }
        }
        .pay-type{
            margin-top: 21px;
            background-color: @moudle-bg-color;
            padding-bottom: 22px;
            .pay-type-title{
                line-height: 55px;
                padding-left: 22px;
                .title{
                    .fz(18px);
                    font-weight: bold;
                }
                .sign-expiration-date{
                    .fz(14px);
                    .color(#F29C38);
                    margin-left: 17px;
                }
                border-bottom: @under-line;
            }
            .pay-type-radio{
                padding: 40px 0 34px;
                .invoice-info .invoice-detail .invoice-type-radio;
                label{
                    margin-left: 25px;
                    img{
                        vertical-align: middle;
                    }
                    &:before{
                        .size(14px,14px);
                        margin-top: 2px;
                    }

                    &:nth-of-type(1){
                        margin-left: 84px;
                    }
                }
            }
            .public-explain{
                .width(900px);
                .center(auto-x);
                background-color: #fbfbfb;
                border: 1px solid #e4e4e4;
                .fz(16px);
                padding: 26px 30px;

                .sign{
                    .title{
                        .color(#0c0c0c);
                        font-weight: bold;
                    }
                    .sign-text{
                        .color(@main-color);
                    }
                }
                .explain-list{
                    .color(#67717D);
                    .fz(16px);

                    &>li{
                        margin-top: 19px;
                        .identification-code{
                            .color(#F38495);
                        }
                        .explain{
                            .color(#9F9F9F);
                            padding-left: 90px;
                            margin-top: 12px;
                            line-height: 24px;
                        }
                        .bank-account-info{
                            padding-left: 90px;
                            &>li{
                                margin-top: 10px;
                                .title{
                                    .color(#9F9F9F);
                                    .text-align-last-justify(50px);
                                }
                                .value{
                                    .color(#67717D);
                                    margin-left: 30px;
                                }
                            }
                        }
                    }
                }
            }
        }
        .confirm-order{
            .height(64px);
            background-color: #E8E8E8;
            .clearfix;
            margin-top: 21px;

            .origin-fee{
                .fz(18px);
                font-weight: bold;
                line-height: 64px;
                .fl;
                margin-left: 20px;
                .color(#000000);
            }
            .discount-fee{
                .fz(16px);
                line-height: 64px;
                .fl;
                margin-left: 21px;
                .color(#A2A2A2);
            }
            .express-fee{
                .discount-fee;
            }
            .btn-pay{
                .size(138px);
                text-align: center;
                line-height: 65px;
                font-weight:normal;
                .fz(30px);
                .fr;
                .bg('@{img-base-url}order_text-jiesuan.png',no-repeat,center,auto);
                background-color: @main-color;
                margin-left: 17px;
                cursor: pointer;
            }
            .real-fee-wrap{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-end;
                .height;
                .fr;
                padding: 5px 0;

                .real-fee{
                    .color(#131313);
                    .fz(16px);
                    span{
                        .fz(24px);
                        .color(@main-color);
                        vertical-align: middle;
                    }
                }
                .pay-agreement{
                    .fz(12px);
                    i{
                        .size(14px,14px);
                        margin-right: 6px;
                        border: 1px solid #1296db;
                        .border-radius(50%);
                        cursor: pointer;
                        .extend-click;
                        &.active{
                            .bg('@{img-base-url}order_icon-checked-agreement.png');
                            background-size: 100%;
                        }
                    }
                    span{
                        vertical-align: middle;
                    }
                    a{
                        .color(#1296DB);
                        vertical-align: middle;
                    }
                }
            }
        }
    }

</style>